<template>
  <div>
    <el-row :gutter="10" style="margin-bottom: 60px">
      <el-col :span="6">
        <el-card style="color: #409eff">
          <div><i class="el-icon-user-solid" />交警用户总数</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ total }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #f56c6c">
          <div><i class="el-icon-money" />为民服务35年以上</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ grt35 }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #67c23a">
          <div><i class="el-icon-bank-card" />为民服务30年以上</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ grt30 }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #409eff">
          <div style="color: #409eff">
            <i class="el-icon-s-shop" />为民服务20年以上
          </div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ grt20 }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div id="main" style="width: 700px; height: 480px"></div>
      </el-col>
      <el-col :span="12">
        <div id="pie" style="width: 400px; height: 480px; left: 100px"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { YearsOfService } from "@/api/api";

export default {
  name: "Home",
  data() {
    return {
      total: 0, // 初始值
      users: 0,
      grt35: 0,
      grt30: 0,
      grt20: 0,
      open: 0,
      closed: 0,
    };
  },
  async mounted() {
    //使用mounted的目的是为了等页面元素渲染之后再触发

    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);

    var charOption;
    charOption = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      title: {
        text: "交警为民服务工龄分布图",
        subtext: "假设长期的工作经验意味着更丰富的实战经验和更熟练的专业技能",
        left: "center",
      },
      dataset: {
        source: [
          ["score", "amount", "product"],
          [10, 23, "为民服务1年以内"],
          [15, 90, "为民服务3年以内"],
          [25, 14, "为民服务5年以上"],
          [40, 90, "为民服务10年以上"],
          [50, 70, "为民服务15年以上"],
          [65, 150, "为民服务20年以上"],
          [70, 120, "为民服务25年以上"],
          [85, 120, "为民服务30年以上"],
          [100, 100, "为民服务35年以上"],
        ],
        textStyle: {
          fontSize: 40,
          color: "#fff",
        },
      },
      grid: { containLabel: true },
      xAxis: { name: "交警数" },
      yAxis: { type: "category" },
      visualMap: {
        orient: "horizontal",
        left: "center",
        min: 2,
        max: 100,
        text: ["交警为民服务时常", ""],
        // Map the score column to color
        dimension: 0,
        inRange: {
          color: ["#65B581", "#FFCE34", "#FD665F"],
        },
      },
      series: [
        {
          type: "bar",
          dataset: [],
          label: {
            show: true, // 显示数据标签
            position: "right", // 标签位置
            // formatter: "{c}", // 标签内容格式器，{c} 表示数据值
            formatter: function (params) {
              return params.dataset; // 返回数据值作为标签内容
            },
          },
          showBackground: true,
          encode: {
            // Map the "amount" column to X axis.
            x: "amount",
            // Map the "product" column to Y axis
            y: "product",
          },
        },
      ],
    };

    var pieDom = document.getElementById("pie");
    var pieChart = echarts.init(pieDom);
    var pieOption;

    pieOption = {
      title: {
        text: "交警为民服务工龄比例图",
        // subtext: "比例图",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "right",
      },
      series: [
        {
          type: "pie",
          radius: "70%",
          label: {
            normal: {
              show: true,
              position: "inner",
              textStyle: {
                fontWeight: 300,
                fontSize: 16,
                color: "#fff",
              },
              formatter: "{d}%", //自定义显示格式(b:name, c:value, d:百分比)
            },
          },
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    const res = await YearsOfService();
    //对 方块中的数据进行赋值
    this.grt35 = res.data.char1[8];
    this.grt30 = res.data.char1[7];
    this.grt20 = res.data.char1[5];

    let chardata = charOption.dataset.source;
    for (let i = 0; i < res.data.char1.length; i++) {
      let temp = chardata[i + 1]; // 第1行数据是标题，不用赋值，从第2行开始
      temp[1] = res.data.char1[i]; // 对要显示的数据 charOption.dataset.source 中的 第 2列的数据进行赋值
      // 同时给 pieOption.series[0].data 进行赋值 ， 待优化
      this.total = this.total + res.data.char1[i];
    }
    myChart.setOption(charOption);

    pieOption.series[0].data = [
      { name: "1年以内", value: res.data.char1[0] },
      { name: "3年以内", value: res.data.char1[1] },
      { name: "5年以上", value: res.data.char1[2] },
      { name: "10年以上", value: res.data.char1[3] },
      { name: "15年以上", value: res.data.char1[4] },
      { name: "20年以上", value: res.data.char1[5] },
      { name: "25年以上", value: res.data.char1[6] },
      { name: "30年以上", value: res.data.char1[7] },
      { name: "35年以上", value: res.data.char1[8] },
    ];
    pieChart.setOption(pieOption);
  },
};
</script>
<style scoped>
/* 在 Vue.js 中，<style scoped> 是一个特殊的语法，用于限制样式的作用范围，确保样式仅对当前组件生效，而不会影响到其他组件或全局样式。 */
/* 当你在 Vue 组件中使用 <style scoped> 时，Vue 会自动为该组件的 HTML 元素添加一个唯一的属性（如 data-v-f3f3eg9），并在 CSS 选择器中添加这个属性，以确保样式只应用到该组件的根元素及其子元素上。 */
</style>
